<template>
  <div>
    <sub-title :subTitle="'系统首页'"></sub-title>
    <div class="body">
      <div class="row-top flex between">
       <div>
         <img src="@/assets/index/icon-1.png" alt="">
         <div>
           <p class="font-18 gray">今日订单总数</p>
           <p class="font-18 red bold">{{ data.todayOrderNum }}</p>
         </div>
       </div>
       <div>
         <img src="@/assets/index/icon-2.png" alt="">
         <div>
           <p class="font-18 gray">今日销售额</p>
           <p class="font-18 red bold">{{'¥' + data.todayOrderMoney }}</p>
         </div>
       </div>
       <div>
         <img src="@/assets/index/icon-3.png" alt="">
         <div>
           <p class="font-18 gray">昨日销售额</p>
           <p class="font-18 red bold">{{'¥' + data.yesterdayOrderMoney }}</p>
         </div>
       </div>
       <div>
         <img src="@/assets/index/icon-4.png" alt="">
         <div>
           <p class="font-18 gray">近七日销售总额</p>
           <p class="font-18 red bold">{{'¥' + data.nearlySevenDaysOrderMoney }}</p>
         </div>
       </div>
      </div>
      <table class="table-middle" border="1">
        <caption class="box-title">待处理事务</caption>
        <tbody>
          <tr>
            <td @click="linkOrder">待付款订单<em>({{ data.dfk }})</em></td>
            <td @click="linkOrder">已完成订单<em>({{ data.ywc }})</em></td>
            <td @click="linkOrder">待确认退货订单<em>({{ data.dqrth }})</em></td>
          </tr>
          <tr>
            <td @click="linkOrder">待发货订单<em>({{ data.dfh }})</em></td>
            <td @click="linkOrder">待处理退款申请<em>({{ data.dcltk }})</em></td>
            <td @click="linkOrder">已发货订单<em>({{ data.dsh }})</em></td>
          </tr>
          <tr>
            <!-- <td>待处理退货订单(<em></em>)</td> -->
             <td @click="linkAdvertising">广告位即将到期<em>(0)</em></td>
          </tr>
        </tbody>
      </table>
      <div>
        <div class="box-title">运营快捷入口</div>
        <ul class="list flex">
          <li class="flex-1" @click="linkUrl(item.path)" v-for="(item, index) in entryList" :key="index">
              <img class="list-icon" :src="item.icon" alt="">
              <p class="font-18 gray text-center">{{ item.text }}</p>
          </li>
        </ul>
      </div>
      <div class="info">
        <el-row :gutter="50">
         <el-col :span="12">
           <div class="box-title">商品总览</div>
           <div class="flex">
             <div>
               <p class="font-22 red">{{ goodsData.notpull || 0 }}</p>
               <p class="font-18 gray">已下架</p>
             </div>
             <div>
               <p class="font-22 red">{{ goodsData.put || 0 }}</p>
               <p class="font-18 gray">已上架</p>
             </div>
             <div>
               <p class="font-22 red">{{ goodsData.all || 0 }}</p>
               <p class="font-18 gray">全部商品</p>
             </div>
           </div>
         </el-col>
         <el-col :span="12">
           <div class="box-title">用户总览</div>
           <div class="flex">
             <div>
               <p class="font-22 red">{{ userData.yesterdayAddUserCount  || 0 }}</p>
               <p class="font-18 gray">昨日新增</p>
             </div>
             <div>
               <p class="font-22 red">{{ userData.monthAddUserCount  || 0 }}</p>
               <p class="font-18 gray">本月新增</p>
             </div>
             <div>
               <p class="font-22 red">{{ userData.allUserCount  || 0 }}</p>
               <p class="font-18 gray">会员总数</p>
             </div>
           </div>
         </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
  import subTitle from "@/components/subTitle"
  export default {
    name: "systemIndex",
    components: {
      subTitle,
    },
    data(){
      return{
        userData: {},
        goodsData: {},
        data: {
          todayOrderNum: 0,
          todayOrderMoney: 0,
          yesterdayOrderMoney: 0,
          nearlySevenDaysOrderMoney: 0,
        },
        aUnpaid : 0,//待处理
        complate : 0,//已完成
        pending : 0,//待确认退货
        back_orders : 0,//代发货
        order : '',
        all_wei :'',//待处理退款
        all_shipped :'',//已发货
        todayOrderNum : 0,
        todayOrderMoney : 0,
        yesterdayOrderMoney : 0,
        nearlySevenDaysOrderMoney : 0,
        goods : '',
        entryList: [
          {
            icon: require("@/assets/index/icon-5.png"),
            text: '添加商品',
            path: '/goods/add'
          },
          {
            icon: require("@/assets/index/icon-6.png"),
            text: '订单列表',
            path: '/order/list'
          },
          {
            icon: require("@/assets/index/icon-7.png"),
            text: '用户管理',
            path: '/user/list'
          },
          {
            icon: require("@/assets/index/icon-8.png"),
            text: '交易统计',
            path: '/statistics/deal'
          },
          {
            icon: require("@/assets/index/icon-10.png"),
            text: '广告管理',
            path: '/operate/advertising'
          }
        ]
      }
    },
    methods: {
      linkUrl(path){
        this.$router.push(path);
      },
      linkOrder(){
        this.$router.push('/order/list');
      },
      linkAdvertising(){
        this.$router.push('/operate/advertising');
      }
    },mounted(){
      this.$http.post("merchant_order/getOrderAllCount", {
        merchantId: JSON.parse(this.$store.getters.userInfo).merchantId
      }).then((res) => {
        this.data = res;
      });
      this.$http.post("merchant/merchant_index").then((res) => {
        this.userData = res
      });
      this.$http.post("merchantGoods/goodsCountStatistics").then((res) => {
        this.goodsData = res
      })
    }
  }
</script>

<style scoped lang="scss">
  .row-top{
    >div{
      flex: 1;
      display: flex;
      align-items: center;
      margin-right: 20px;
      margin-bottom: 30px;
      height: 105px;
      box-sizing: border-box;
      background-color: #F7F8F8;
      border: 1px solid #5BC0BF;
      img{
        margin: 0 15px;
      }
      div p{
        line-height: 28px;
      }
      &:last-child{
        margin-right: 0;
      }
    }
  }
  .box-title{
    line-height: 60px;
    color: #5a5a5a;
    font-weight: bold;
    font-size: 22px;
    background-color: #efefef;
    text-align: left;
    padding-left: 20px;
    border: 1px solid #b4b4b4;
    border-bottom-color: transparent;
  }
  .table-middle{
    width: 100%;
    margin-bottom: 30px;
    border-right: 1px solid #b4b4b4;
    border-bottom: 1px solid #b4b4b4;
    tr{
      height: 60px;
      background-color: #fff;
    }
    td{
      padding: 0 20px;
      border-left: 1px solid #b4b4b4;
      border-top: 1px solid #b4b4b4;
      color: #5a5a5a;
      &:hover{
        text-decoration: underline;
        cursor: pointer;
      }
    }
  }
  em{
    font-style: normal;
    color:red;
    float: right;
  }
  .list{
    padding: 20px 0 35px;
    border: 1px solid #b4b4b4;
    margin-bottom: 30px;
    li:hover>p{
      cursor: pointer;
      color: #5AC2C0;
    }
    img{
      display: block;
      margin: 0 auto;
    }
  }
  .info{
    .flex{
      border: 1px solid #b4b4b4;
      div{
        flex: 1;
        text-align: center;
        padding: 20px 0;
        p{
          line-height: 36px;
        }
      }
    }
  }
</style>
